<template>
	<view class="my-attention">
		<view class="input-box">
			<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_search.png"></image>
			<input v-model="search" placeholder="搜索店铺名称" />
			<button @click="onSearch">搜索</button>
		</view>
		<template v-if="shops.length">
			<view class="sort">
				时间排序
				<view class="arrow-box">
					<text :class="['asec', sortType == 'asec' ? 'active' : 'inactive']" @click="onSort('asec')"></text>
					<text :class="['desc', sortType == 'desc' ? 'active' : 'inactive']" @click="onSort('desc')"></text>
				</view>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in shops" :key="item.id">
					<image class="logo" :src="item.logo"></image>
					<view class="info-text">
						<view class="name">
						    {{ item.name }}
							<text v-show="item.isCollect == true">已关注</text>
						</view>
						<view class="collect">关注数{{ item.collect || 0 }}</view>
						<view class="address">{{ item.address }}</view>
					</view>
				</view>
				<view class="isMore">没有更多了~</view>
			</view>
		</template>
		<template v-else>
			<empty mode="search" :show="false"/>
		</template>
	</view>
</template>

<script setup lang='ts'>
	import { ref } from 'vue';
	import empty from '@/components/empty/index.vue'
	
	const search = ref('');
	
	const sortType = ref<'asec' | 'desc'>('asec');
	
	const dataSource = ref([
		{
			id: 1,
			name: '主管护师的小店',
			logo: 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png',
			collect: 10,
			isCollect: true,
			address: '山东省/青岛市/青岛区',
		},{
			id: 1,
			name: 'test11',
			logo: 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic2.png',
			collect: 99,
			address: '山东省/青岛市/青岛区',
		}
	])
	
	const shops = ref(dataSource.value); 
	
	const onSearch = () => {
		const reg = new RegExp(search.value);
		shops.value = dataSource.value.filter(item => {
			return reg.test(item.name);
		})
		search.value = '';
	}
	
	const onSort = (type: 'asec' | 'desc') => {
		sortType.value = type;
	}

</script>

<style scoped lang='scss'>
	.my-attention{
		min-height: 100vh;
		padding: 20rpx;
		background-color: #f6f7fb;
		.input-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5rpx;
			border-radius: 38rpx;
			border: 2px solid #44a897;
			image{
				width: 33rpx;
				height: 33rpx;
				margin: 0 10rpx 0 30rpx;
			}
			input{
				flex: 1;
			}
			button{
				height: 56rpx;
				line-height: 56rpx;
				color: #fff;
				font-size: 26rpx;
				border-radius: 33rpx;
				background: linear-gradient(to right, #18cbad, #1cb595);
			}
		}
		.sort{
			color: #44a897;
			font-size: 26rpx;
			padding: 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			.arrow-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 10rpx;
				.asec,.desc{
					border: 4px solid;
				}
				.desc{
					margin-top: 6rpx;
				}
				.asec.inactive{
					border-color: transparent transparent #cdcdcb transparent;
				}
				.desc.inactive{
					border-color: #cdcdcb transparent transparent transparent;
				}
				.asec.active{
					border-color: transparent transparent #18cbad transparent;
				}
				.desc.active{
					border-color: #18cbad transparent transparent transparent;
				}
			}
		}
		.list-box{
			.item{
				display: flex;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				box-shadow: 1px 1px 10px #dddddd;
				background-color: #fff;
				.logo{
					width: 150rpx;
					height: 150rpx;
	                margin-right: 10rpx;
					border-radius: 10rpx;
				}
				.info-text{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-weight: 600;
						display: flex;
						justify-content: space-between;
						text{
							color: #44a897;
							font-size: 26rpx;
							padding: 10rpx 20rpx;
							border-radius: 26rpx;
							background-color: #e8f7f4;
						}
					}
					.collect{
						color: #44a897;
						font-size: 26rpx;
					}
					.address{
						color: #a1a1a1;
						font-size: 26rpx;
					}
				}
			}
			.isMore{
				color: #d6d8da;
				font-size: 26rpx;
				text-align: center;
				margin-top: 30rpx;
			}
		}
	}
</style>
